<template>
	<view>
		横向布局：
		<view class="row">
			<view class="box bg-blue">A</view>
			<view class="box bg-green">B</view>
			<view class="box bg-red">C</view>
		</view>
		纵向布局：
		<view class="coloum">
			<view class="box2 bg-blue">D</view>
			<view class="box2 bg-green">E</view>
			<view class="box2 bg-red">F</view>
		</view>
		其他布局：
		<view class="row other-box-center">
			<view class="item">横向布局-居中</view>
			<view class="item">横向布局-居中</view>
		</view>
		<view>居右</view>
		<view class="row other-box-right">
			<view class="item">横向布局-居右</view>
			<view class="item">横向布局-居右</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
		.box {
			height: 200upx;
			width: 33.3%;
			text-align: center;
			/*水平居中*/
			line-height: 200upx;
			/*行间距与框高度一致，实现垂直居中*/
			color: #FFFFFF;
			/*文本颜色*/
		}	
		.box2{
			height: 200upx;
		}
		.bg-red {
			background-color: #aa0000;
		}
		.bg-blue {
			background-color: #007AFF;
		}
		.bg-green {
			background-color: #4CD964;
		}
		.row {
			display: flex;
			flex-direction: row;
			/*默认横排显示*/
		}
		.coloum{
			display: flex;
			flex-direction: column-reverse;
		}
		/*其他布局的样式*/
		.item{
			height: 80upx;
			line-height: 80upx;
			background-color: #e3e3ea;
			margin: 10upx;
			padding: 10upx;
		}
		.other-box-center{
			justify-content: center;
			-webkit-justify-content:center;
		}
		.oter-box-right{
			justify-content: flex-end;
			-webkit-justify-content:flex-end;
		}

</style>